<template>
  <div class="w">
    <MShelf title="购物清单">
      <div slot="content">
        <div v-if="this.cartList.length">
          <div class="carttitle">
            <div class="title1 t-left">商品信息</div>
            <div class="t-right">
              <div class="title2">单价</div>
              <div class="title3">数量</div>
              <div class="title4">小计</div>
            </div>
          </div>
          <div class="cart-content" v-for="item in cartList" :key="item.productId">
            <div class="image">
              <img :src="item.productImageBig" alt="">
            </div>
            <div class="carttext">{{ item.productName }}</div>
            <div class="price">￥{{ item.salePrice }}.00</div>
            <div class="number">{{ item.productNum }}</div>
            <div class="totalsprice">￥{{ totalsprice(item.productNum,item.salePrice) }}.00</div>
          </div>
          <div class="footer">
            <div class="footer-title">总计：<span>￥{{ ftotalprice }}.00</span></div>
          </div>
        </div>
        <div class="empty" v-else>
          <el-empty description="购物车空空如也">
            <el-button type="primary" @click="$router.push('/goods')">现在选购</el-button>
          </el-empty>
        </div>
      </div>
    </MShelf>
  </div>
</template>

<script>
import MShelf from "../../components/Shelf";
import { mapState} from "vuex";
export default {
  name: "Cart",
  components: {
    MShelf,
  },
  computed: {
    ...mapState(["cartList"]),
    totalsprice() {
      return function(num, price) {
        return num * price
      }
    },
    ftotalprice() {
      return (
        this.cartList &&
        this.cartList.reduce((total, item) => {
          total += item.productNum * item.salePrice;
          return total;
        }, 0)
      )
    }
  }
};
</script>

<style scoped>
.w {
margin-top: 50px;
}
.carttitle {
  height: 50px;
  line-height: 50px;
  font-size: 13px;
  background: #eee;
  overflow: hidden;
  margin-bottom: 20px;
}
.t-left {
  float: left;
  margin-left: 60px;
}
.t-right {
  margin-right: 130px;
  float: right;
}
.t-right div {
  margin: 0 60px;
  float: left;
}
.image  {
  width: 80px;
  height: 80px;
  margin: 0 50px 0 30px;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
}
.image img {
  width: 100%;
  height: 100%;
  display: block;
}
.cart-content {
  padding: 20px;
  overflow: hidden;
  line-height: 80px;
}
.cart-content div {
float: left;
}
.carttext {
  width: 520px;
}
.price {
  width: 100px;
  margin-right: 65px;
}
.number {
  width: 50px;
  margin-right: 80px;
}
.totalsprice {
  width: 100px;
}
.footer {
  width: 90%;
  height: 50px;
  line-height: 60px;
  font-size: 18px;
  padding-right: 25px;
  margin: 20px auto;
  border-top: 1px solid #ccc;
  text-align: right;
}
.footer span {
  color: red;
}
</style>